import createElement from "./createElement";
import updateChild from "./updateChildren";
export default function patchVnode(newVnode, oldVnode) {
    console.log("是同一节点");
    // 精细化比较
    /*
        情况：
        1、新旧节点都有text属性；
        2、旧节点有text属性，但是新节点有children；
        3、旧节点有children，但是新节点有text属性；
        4、新旧节点都是有children
    */
    // 第一步：判断新旧节点是否是同一个对象
    // 如果是同一个对象
    if (oldVnode === newVnode) return;
    else {
        console.log("不是同一个对象");
        // 不是同一个对象
        // 第二步：newVnode是否有text属性
        // 有text属性，则没有children
        // if (newVnode.text != undefined)
        if (newVnode.text != undefined && (newVnode.children == undefined || newVnode.children.length == 0)) {
            // 新旧节点的text是否相同 相同就什么都不需要做 不相同就需要替代
            console.log("新节点有text属性");
            if (newVnode.text != oldVnode.text) {
                console.log(oldVnode, newVnode);
                // 旧节点的innertext就需要被替换为newvnode的text
                oldVnode.elm.innerText = newVnode.text;
            }
        }
        // newVnode没有text属性，说明newVnode有children
        else {
            console.log("新节点只有children");
            // 第三步：判断oldVnod是否有children
            // 如果没有，说明oldVnode是text属性
            if (oldVnode.children != undefined && oldVnode.children.length > 0) {
                // 这里就是新旧节点都是children的情况
                // 新增
                // 新创建的节点插入到所有未处理的节点之前，
                // 而不是所有已经处理的节点之后
                // let un = 0;
                // for (let i = 0; i < newVnode.children.length; i++) {
                //     let ch = newVnode.children[i];
                //     let isExit = false;
                //     // 再次遍历 看看oldVNode中是否有节点和他是same的，即key值是一样的
                //     for (let j = 0; j < oldVnode.children.length; j++) {
                //         if (oldVnode.children[j].sel == ch.sel && oldVnode.children[j].key == ch.key) {
                //             isExit = true;
                //         }
                //     }
                //     if (!isExit) {
                //         let dom = createElement(ch);
                //         ch.elm = dom;
                //         // 这里就是新节点要插入到未处理的节点之前
                //         if (un < oldVnode.children.length) {
                //             oldVnode.elm.insertBefore(dom, oldVnode.children[un].elm)
                //         } else {
                //             // 这里就说明oldVNode已经遍历结束了，然后就可以直接在后面追加
                //             oldVnode.elm.appendChild(dom);
                //         }

                //     } else {
                //         // 处理节点的指针下移
                //         un++;
                //     }
                // }

                // 四种命中规则
                updateChild(oldVnode.elm, oldVnode.children, newVnode.children)
            } else {
                console.log(oldVnode);
                // 1、清空oldVn ode的text
                oldVnode.elm.innerHTML = "";
                // 2、把newVnode的children添加到DOM中
                for (let i = 0; i < newVnode.children.length; i++) {
                    let dom = createElement(newVnode.children[i]);
                    console.log(dom);
                    console.log(oldVnode.elm);
                    oldVnode.elm.appendChild(dom);
                }
            }

        }
    }
}